<script setup lang="ts">

import {onBeforeMount, onMounted, ref} from "vue";
import { useAudioPlayerStore } from '@/stores/index'
const playerRef = ref<HTMLAudioElement | null>(null)
const playProgress = ref<HTMLInputElement | null>(null)
const catchProgress = ref<HTMLInputElement | null>(null)
const playerStore = useAudioPlayerStore()
const controls = `
<div class="plyr__controls">
<!--    <button type="button" class="plyr__control" aria-label="Play, {title}" data-plyr="play">-->
<!--        <svg class="icon&#45;&#45;pressed" role="presentation"><use xlink:href="#plyr-pause"></use></svg>-->
<!--        <svg class="icon&#45;&#45;not-pressed" role="presentation"><use xlink:href="#plyr-play"></use></svg>-->
<!--        <span class="label&#45;&#45;pressed plyr__tooltip" role="tooltip">暂停</span>-->
<!--        <span class="label&#45;&#45;not-pressed plyr__tooltip" role="tooltip">播放</span>-->
<!--    </button>-->
    <div class="plyr__progress" style="width: 100%;height: 2px;">
        <input data-plyr="seek" type="range" min="0" max="100" step="0.01" value="0" style="height: 2px;" aria-label="Seek">
        <progress class="plyr__progress__buffer" min="0" max="100" value="0" style="height: 2px;" >% buffered</progress>
<!--        <span role="tooltip" class="plyr__tooltip">00:00</span>-->
    </div>
<!--    <div class="plyr__time plyr__time&#45;&#45;current" aria-label="Current time">00:00</div>-->
<!--    <div class="plyr__time plyr__time&#45;&#45;duration" aria-label="Duration">00:00</div>-->
<!--    <button type="button" class="plyr__control" aria-label="Mute" data-plyr="mute">-->
<!--        <svg class="icon&#45;&#45;pressed" role="presentation"><use xlink:href="#plyr-muted"></use></svg>-->
<!--        <svg class="icon&#45;&#45;not-pressed" role="presentation"><use xlink:href="#plyr-volume"></use></svg>-->
<!--        <span class="label&#45;&#45;pressed plyr__tooltip" role="tooltip">取消静音</span>-->
<!--        <span class="label&#45;&#45;not-pressed plyr__tooltip" role="tooltip">静音</span>-->
<!--    </button>-->
<!--    <div class="plyr__volume">-->
<!--        <input data-plyr="volume" type="range" min="0" max="1" step="0.05" value="1" autocomplete="off" aria-label="Volume">-->
<!--    </div>-->

</div>
`;
onMounted(()=>{
  if(playerRef.value !== null)
  {
    playerStore.initPlayer(playerRef.value,'')
  }


})

const HandleSetTime = (e:any)=>{
  if(playProgress.value !== null)
  {
    playerStore.setPlayingTime(parseFloat(e.target.value))
  }
}


</script>

<template>
  <div class="plyr">
    <audio controls crossorigin="anonymous" ref="playerRef" id="global_audio" />
    <input type="range" class="progress" :value="playerStore.currentTime" :max="playerStore.songTime"  @input="HandleSetTime($event)" ref="playProgress" />
    <input type="range"  class="catch" value="0" ref="catchProgress" disabled />
  </div>
</template>

<style lang="scss" scoped>
.plyr {
  width: 100%;
  height: 8px;
  //background-color: #dadada;
  //position: absolute;
  position: relative;

  audio {
    display: none;
  }

  input{
    width: 100%;
    height: 8px;
    border: none;
    margin: 0;
    padding: 0;
    position: absolute;
    background-color: transparent;
    top: 0;
    left: 0;
    transition: all 0.3s;
    appearance: none;
    -webkit-appearance: none;
    color: #1ecf9d;
  }

  .progress{
    z-index: 100;
    overflow: hidden;

    &::-webkit-slider-runnable-track{
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      //background: #1ecf9d !important;
      background-color: #dadada;
      height: 2px;
    }

    &::-webkit-slider-container{
      width: 8px;
      overflow: hidden;
    }

    &::-webkit-slider-thumb{
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border-radius:50%;
      //color:  #1ecf9d;
      background-color: #1ecf9d;
      height: 2px;
      width: 2px;
      //box-shadow: calc(-50vw - 4px) 0 0 50vw #1ecf9d;
      //transform: translateY(px);
      border: 1px solid transparent;
      border-image: linear-gradient(#1ecf9d,#1ecf9d) 0 fill / 3 1 3 0 / 3px 0 3px 20000px;
    }

    &:hover{
      &::-webkit-slider-thumb{
        height: 8px;
        width: 8px;
        transform: translateY(-3px);
        border-image: linear-gradient(#1ecf9d,#1ecf9d) 0 fill / 6 7 6 0 / 3px 0 3px 20000px;
      }
    }
  }

  .catch{
    z-index: 1;
    display: none;
    &::-webkit-slider-thumb{
      display: none;
    }
  }


}
</style>